<template>
    <div ref="waterMark" class="waterMark" :style="waterMarkStyle"></div>
</template>

<script>

export default {
    props: {
        // text: {
        //     type: String,
        //     required: true
        // },
        // font: {
        //     type: [String, Number],
        //     default: "14px Microsoft JhengHei"
        // },
        // textColor: {
        //     type: String,
        //     default: "rgba(180, 180, 180, 0.1)"
        // },
        // width: {
        //     type: [String, Number],
        //     default: 100
        // },
        // height: {
        //     type: [String, Number],
        //     default: 200
        // },
        styles: {
            type: Object,
            default: () => { }
        },
        options: {
            type: Object,
            required: true,
        }
    },
    computed: {
        waterMarkStyle() {
            return Object.assign({
                height: '100%',
                width: '100%',
                position: 'absolute',
                top: '0',
                left: '0',
                zIndex: 99999,
                pointerEvents: 'none'
            }, this.styles)
        },
        // options() {
        //     const { text, font, textColor, width, height, style } = this;

        //     return { text, font, textColor, width, height, style }
        // }
    },
    watch: {
        options(val) {
            if (val && val.text) {
                const {
                    text,
                    font = "14px Microsoft JhengHei",
                    textColor = "rgba(180, 180, 180, 0.1)",
                    width = 100,
                    height = 200,
                } = val;
                this.addWaterMarker(text, font, textColor, width, height)
            }
        }
    },
    methods: {
        // 水印
        addWaterMarker(text, font, textColor, width, height) {
            let can = document.createElement('canvas');
            let parentNode = this.$refs.waterMark;
            let childNodes = parentNode.childNodes
            if (childNodes.length)
                parentNode.removeChild(parentNode.childNodes[0]);
            parentNode.appendChild(can);
            can.width = width;
            can.height = height;
            can.style.display = 'none';
            let cans = can.getContext('2d');
            cans.rotate(-20 * Math.PI / 180);
            cans.font = font;
            cans.fillStyle = textColor;
            cans.textAlign = 'left';
            cans.textBaseline = 'middle';
            cans.fillText(text, 0, can.height / 2);
            parentNode.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")";
        }
    }

}
</script>

<style>
</style>
